Skip to main content

Login Branding

This package implements a new login page for Qore applications and provides full support for the qore\sso plugin.

Users with the ability to manage the application settings are able to create blueprints for the login page. Administrators will be able to:

  • Upload a background image
  • Edit the background image (Add text, apply filters)
  • Select the position of the login form (left, center, right)
  • Select a period to show a login blueprint (for example the Christmas or Easter period)

Installation​

You can install the package via composer:

composer require qore/login-branding

Laravel​

php artisan vendor:publish --tag=qore.login-branding.config
php artisan vendor:publish --tag=qore.login-branding.db
1. Migrate​

Make sure to migrate.

2. Resources​

This package comes with the LoginBlueprintResource.


The resource could be implemented in the settings menu in the GlobalsController.

private function menu(): Menu
{
    ...
        if (plugin_is_active('qore/login-branding')) {
            $group->addResourceMenuItem(resource(LoginBlueprintResource::class));
        }
    ...
}

Frontend ​

1. Publish Components​

Frontend components should be published. To publish the frontend components:

php artisan vendor:publish --tag=qore.login-branding.frontend
2. Registering Pages​

This package comes with two Login pages: Login.vue and LoginSocial.vue. The latter is used for OAuth redirects if the qore/sso plugin is implemented in your application.

In your frontend/src/router/routes.js add the published vue file(s) as a child to the guest middleware and replace the old login:

...middleware('guest', [
    {
        path: '/',
        component: () => import('layouts/AuthLayout.vue'),
        children: [
            /* The new page */
            { 
                path: 'login', 
                component: () => import('vendor/login-branding/pages/auth/Login.vue'),
                name: 'login'
            },
            /* The SSO redirect page */
            { 
                path: 'login-social/:provider/callback', 
                component: () => import('vendor/login-branding/pages/auth/LoginSocial.vue'), 
                name: 'login-social' 
            },
        ],
    }
]
3. Yarn dependency​

This plugin requires additional yarn dependencies, to install them:

yarn add image-conversion

4. Fontawesome setup​

Fontawesome v6 is used to display OAuth company logo's if qore\sso is used.

See Quasar docs on how to install fontawesome v6

5. Register locales​

The following locales should manually be added to the local files of your application.

{
  "Login to {app}": "Login to {app}",
  "Logging you in": "Logging you in"
}

Configuring​

Config​

brand_image_url: public path to company logo. This path should be publicly accessible.

Usage​

Public routes​

api/login/data:


The login page uses this route to fetch information about the current active blueprint.

Return example :

{
    'position': 'left', // 'left'|'center'|'right'
    'background_image_url': 'http://localhost:8000/storage/login/bg1.png',
    'brand_image_url': 'http://localhost:8000/storage/login/company_logo.png'
}

Defaults to the primary color as background and the login form positioned on the right.

Upgrade guide​

composer update qore/login-branding

If updates to migrations or Vue components are needed:

php artisan vendor:publish --tag=qore.login-branding.db --force
php artisan vendor:publish --tag=qore.login-branding.frontend --force

Release notes​

0.1.0 Initial release​

0.1.1​

  • Small bug fixes and improvements.

0.1.2​

  • Code cleanup.
  • Added locales
    Due to the qore extension lifecycle the plugin cannot register locales. The following locales need to be manually added:
    {
      "Login to {app}": "Login to {app}",
      "Logging you in": "Logging you in"
    }